<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>作业皮肤</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			body {
				background: url(image/1.jpg) no-repeat;
			}
			
			.box {
				text-align: center;
				height: 165px;
				background: rgba(255, 255, 255, 0.3);
				padding-top: 15px;
			}
			
			img {
				cursor: pointer;
				margin: 0 10px;
			}
		</style>

	</head>

	<body>
		<div class="box">
			<img src="image/1.jpg" name="image/1.jpg" width="200px">
			<img src="image/2.jpg" name="image/2.jpg" width="200px">
			<img src="image/3.jpg" name="image/3.jpg" width="200px">
			<img src="image/4.jpg" name="image/4.jpg" width="200px">
			<img src="image/5.jpg" name="image/5.jpg" width="200px">
		</div>
		<script>
			var box = document.getElementsByTagName("div")[0];
			//获得body标签
			var bm = document.body;
			//获取事件源
			var imgArr = box.children;
			//绑定事件
			for (var i = 0; i < imgArr.length; i++) {
				imgArr[i].index = i;
				imgArr[i].onclick = function() {
					//改body的背景
					bm.style.backgroundImage = "url(" + this.src + ")";
				}
			}
		</script>

	</body>

</html>